@import "../../../no-image";
@import "../../../base/display/set3-template";

.tvo-#{$template-name}-template {
  .custom-set3 {
    h4 {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: 1.5px;
      margin-top: 20px;
    }

    padding: 15px 35px 35px 35px;
    margin-bottom: 35px;
    box-shadow: 0 0 10px 1px #e8e8e8;

    hr {
      width: 10%;
      margin: 20px auto;
    }

    .tvo-testimonial-info {
      margin: 10px 0 40px 0;
      padding: 0;

      span {
        font-size: 16px;
        text-transform: none;
        color: #000;
      }
    }

    .tvo-testimonial-quote {
      background: transparent;
      margin: 0;
      border: none;
      height: auto;
      transform: rotate(180deg);

      &:before {
        background: transparent;
        position: relative;
        font-size: 70px;
      }
    }
  }
}

$color-pallete: (
        'black': (#3d3d3d, #303030, #000000, #d1d1d1, #666666),
        'blue': (#50c6f2, #3f9cbf, #2a6981, #92b1bb, #266378),
        'green': (#30dea3, #26af81, #197557, #8cb7a8, #196f52),
        'orange': (#f6ce2c, #f39c12, #816d17, #bdb38b, #266378),
        'purple': (#c3aaed, #9a86bb, #675b7f, #afaabb, #605577),
        'red': (#fd7b71, #c86159, #87413b, #bf9d9c, #803c39),
        'teal': (#49d0d0, #2b9f9f, #286d6e, #91b3b4, #246869),
        'white': (#f4f4f4, #d9d9d9, #939393, #8e8e8e, #1e1e1e)
);

@each $name, $color in $color-pallete {
  .tvo-#{$template-name}-template.tve_#{$name} {
    .tvo-testimonial-quote, .tvo-testimonial-info span:first-child {
      color: nth($color, 2);
    }
  }
}
